<!DOCTYPE html>
<#assign base=request.contextPath />
<html>
<head>
    <base id="base" href="${base}">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Lockscreen</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="${request.contextPath}/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet"
          href="${request.contextPath}/adminlte/bower_components/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="${request.contextPath}/adminlte/bower_components/Ionicons/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="${request.contextPath}/adminlte/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="${request.contextPath}/static/css/user.css">
    <!-- daterange picker -->
    <link rel="stylesheet"
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Google Font -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition lockscreen">
<!-- Automatic element centering -->
<div class="lockscreen-wrapper">
    <div class="lockscreen-logo">
        <a href="">摇一摇</a>
    </div>
    <!-- User name -->
<#list sysUsers as tSysUser>
    <#if (tSysUser_index==0)>
    <div class="lockscreen-name">${tSysUser.name}</div>
    </#if>
</#list>

    <!-- START LOCK SCREEN ITEM -->
    <div class="lockscreen-item">
        <!-- lockscreen image -->
        <div class="lockscreen-image" data-toggle="modal" data-target="#modal-default">
            <img src="${base}/adminlte/dist/img/user1-128x128.jpg" alt="User Image">
        </div>
        <!-- /.lockscreen-image -->

        <!-- lockscreen credentials (contains the form) -->
        <form class="lockscreen-credentials">
            <div class="input-group">
                <input type="password" class="form-control" placeholder="password">

                <div class="input-group-btn">
                    <button type="button" class="btn"><i class="fa fa-arrow-right text-muted"></i></button>
                </div>
            </div>
        </form>

    </div>
    <div id="inputError" class="form-group has-error text-center">
        <label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> Input with
            error</label>
    </div>
    <!-- /.lockscreen-item -->
    <div class="help-block text-center">
        Enter your password to retrieve your session
    </div>
    <div class="text-center">
        <a href="login.html">Or sign in as a different user</a>
    </div>
    <div class="lockscreen-footer text-center">
        Copyright &copy; 2014-2016 <b><a href="https://adminlte.io" class="text-black">Almsaeed Studio</a></b><br>
        All rights reserved
    </div>
</div>
<!-- /.center -->
<div class="modal fade" id="modal-default">
<#if sysUsers??>
    <div class="selblock">
        <ul>
            <#list sysUsers as tSysUser>
                <li class="ln_li">
                    <#if (tSysUser_index<6)>
                        <img class="head-image"
                             src="${request.contextPath}/adminlte/dist/img/user${tSysUser_index+1}-128x128.jpg"
                             alt="User Image">
                    <#else >
                        <img class="head-image"
                             src="${request.contextPath}/adminlte/dist/img/user1-128x128.jpg"
                             alt="User Image">
                    </#if>
                    <#if tSysUser.name??>
                        <label class="selblock name">${tSysUser.name}</label>
                    <#else >
                        <label class="selblock name">${tSysUser.openId}</label>
                    </#if>
                </li>
            </#list>
        </ul>
    </div>
</#if>
</div>
<!-- jQuery 3 -->
<script src="${request.contextPath}/adminlte/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="${request.contextPath}/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<script src="${request.contextPath}/static/js/lockscreen.js"></script>
</body>
</html>
